<template>
	<div class="form-container">
		<h2>添加任务</h2>
		<el-form :model="taskForm" :rules="taskFormRules" ref="taskFormRules" label-width="120px">
			<el-form-item label="任务名称" prop="taskName"><el-input v-model="taskForm.taskName"></el-input></el-form-item>
			<el-form-item label="任务明细" prop="taskDesc"><el-input :rows="3" type="textarea" v-model="taskForm.taskDesc"></el-input></el-form-item>
			<el-form-item label="任务报酬" prop="salary"><el-input v-model="taskForm.salary"></el-input></el-form-item>
			<el-form-item label="任务等级" prop="level"><el-input v-model="taskForm.level"></el-input></el-form-item>
			<el-form-item label="任务截止时间" prop="deadline">
				<el-date-picker
					v-model="taskForm.deadline"
					type="date"
					placeholder="选择截止日期"
					:disabled-date="disabledDeadDate"
					:shortcuts="shortcuts"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD 23:59:59"
					@change="setExpried()"
				/>
			</el-form-item>

			<el-form-item label="任务过期时间" prop="expired">
				<el-date-picker v-model="taskForm.expired" type="date" placeholder="选择过期日期" :disabled-date="disabledExpiredDate" :shortcuts="shortcuts" format="YYYY-MM-DD" />
			</el-form-item>
			<div style="margin-top: 20px;margin-bottom: 20px;">
				<el-button @click="clearEdit">取消</el-button>
				<el-button type="primary" @click="saveTaskData('taskFormRules')">确定</el-button>
			</div>
		</el-form>
	</div>
</template>

<script>
import { addTask } from '@/api/task.js';
import { ElMessage } from 'element-plus';
export default {
	name: 'Publish',
	data() {
		return {
			checkFlag: 0,
			taskForm: [],
			taskFormRules: {
				taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
				taskDesc: [{ required: true, message: '请输入任务明细', trigger: 'blur' }],
				salary: [
					{ required: true, message: '仅能输入整数', pattern: /^[0-9]+$/, trigger: 'blur' },
					{ required: true, message: '请输入任务报酬', trigger: 'blur' },
					{ required: true, max: 10, trigger: 'blur', message: '最长仅能为十位' }
				],
				level: [
					{ required: true, message: '仅能输入数字', pattern: /^[0-9]+$/, trigger: 'blur' },
					{ required: true, message: '请输入任务级别', trigger: 'blur' },
					{ required: true, max: 1, trigger: 'blur', message: '任务等级不超过10级' }
				],
				deadline: [{ required: true, message: '请输入任务截止时间', trigger: 'blur' }],
				expired: [{ required: true, message: '请输入任务过期时间', trigger: 'blur' }]
			},
			shortcuts: [
				{
					text: '今天',
					value: new Date()
				},
				{
					text: '7天后',
					value: () => {
						const date = new Date();
						date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
						return date;
					}
				},
				{
					text: '30天后',
					value: () => {
						const date = new Date();
						date.setTime(date.getTime() + 3600 * 1000 * 24 * 30);
						return date;
					}
				}
			]
		};
	},
	methods: {
		saveTaskData(formname) {
			this.$refs[formname].validate(valid => {
				if (valid) {
					this.$confirm('此操作将添加该任务, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
						.then(() => {
							console.log(this.taskForm);

							const param = {
								taskName: this.taskForm.taskName,
								taskDesc: this.taskForm.taskDesc,
								salary: this.taskForm.salary,
								level: this.taskForm.level,
								deadline: this.taskForm.deadline,
								expired: this.taskForm.expired.getTime()
							};

							addTask(param).then(resp => {
								if (resp.success) {
									ElMessage.success('操作成功');
									this.taskForm = [];
									this.$router.go(-1);
									//应该跳转到我发布的任务等页面
								}
							});
						})
						.catch(ex => {
							ElMessage.error('已取消添加！' + ex);
						});
				}
			});
		},
		disabledDeadDate(time) {
			// 禁止选择今天以前的时间
			return time.getTime() < Date.now() - 8.64e7 || time.getTime() > Date.now() + 3600 * 1000 * 24 * 30;
		},
		disabledExpiredDate(time) {
			if (this.taskForm.deadline) {
				this.checkFlag = 1;
				const deadline = new Date(this.taskForm.deadline);
				return time.getTime() < deadline.getTime() - 8.64e7 || time.getTime() > deadline.getTime() + 3600 * 1000 * 24 * 30;
			} else if (!this.taskForm.deadline && this.taskForm.expired && this.checkFlag == '0') {
				ElMessage.error('请先选择截止日期');
				this.taskForm.expired = '';
			}
		},
		setExpried() {
			var date = new Date();
			if (this.taskForm.deadline) {
				const deadline = new Date(this.taskForm.deadline);
				date.setTime(deadline.getTime() + 3600 * 1000 * 24 * 7);
				this.taskForm.expired = date;
			} else {
				this.taskForm.expired = '';
			}
		},
		clearEdit() {
			//清空表单默认值
			this.taskForm = [];
			this.checkFlag = 0;
		},
		handleSelect() {}
	}
};
</script>

<style scoped>
.el-form {
	width: 80%;
	margin: 0 auto;
}

.form-container {
	border: 1px solid #ccc;
	padding: 10px;
	border: 1px solid #ccc;
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	margin: 25px auto 0;
	max-width: 35%;
}
</style>
